<<<<<<< HEAD
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }

            .title {
                font-size: 96px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Laravel 5</div>
            </div>
        </div>
    </body>
</html>
=======
@extends('layout.home.index');
@section('title')
数码宝贝-你的数码宝贝
@stop
@section('content')

<head>
    <link href="/home/basic/css/demo.css" rel="stylesheet" type="text/css" />
    <style>
      

        .box{
            width:1012px;
            height:460px;
            border:1px solid red;
            position:relative;
                    
        }

        .images li{
            position: absolute;
            left:0;
            top:0;
            display: none;
            list-style: none;
        }

        .images li:nth-child(1){
            display: block;
        }

        .nums{
            position: absolute;
            left:450px;
            bottom:20px;
        }

        .nums li{
            width:20px;
            height:20px;
            background: #333;
            border-radius: 20px;
            color:#fff;
            text-align:center;
            line-height: 20px;
            float:left;
            margin-right:6px;
            font-size:12px;
            cursor:pointer;
            list-style: none;
        }

        .nums .click{
            background: red;
        }

        .but{
            width:20px;
            height:40px;
            border:1px solid #fff;
            color:#fff;
            position: absolute;
            text-align: center;
            line-height: 40px;
            top:170px;
            font-size:18px;
            font-weight:bold;
            cursor:pointer;
            display: none;
        }

        .prev{
            left:0;

        }

        .next{
            right:0;
        }
    </style>
</head>

    
<div  style="margin-bottom:20px;width:1200px;height:460px;border:1px solid blue;margin:0 auto;  ">
    <!-- 轮播图 -->
    <div class="box">

        <ul class="images">
            @foreach($data as $k => $v)
            <li><img src="/web/images/{{ $v['photo_name'] }}" alt=""></li>
            @endforeach
        </ul>
        <ul class="nums">
            @foreach($data as $k => $v)
                @if($k == 0)
                <li class="click">{{ $k+1 }}</li>
                @else
                <li>{{ $k+1 }}</li>
                @endif 
            @endforeach
        </ul>

        <div class="but prev"><</div>
        <div class="but next">></div>

    </div>
    <div>
        
    </div>
</div>
    <!-- 轮播图js -->
    <script>
        var m = $('.images li').length - 1;
        $(function(){
            // 定义标识符控制 显示隐藏
            var k = null;
            var time = null;
            Run();
            // 定时器
            function Run(){
                if(time == null){
                    time = setInterval(function(){
                        k++;
                        if(k > m){ k = 0}
                        show_(k);
                    },2000)
                }
            }
            // 控制 图片 和 li 的样式和显示方式
            function show_(k){
                $('.images li').hide();
                $('.images li').eq(k).show();
                // console.log(k);
                $('.nums li').removeClass();
                $('.nums li').eq(k).addClass('click');
            }
            // 清除定时器
            function clear(){
                clearInterval(time);
                time = null;
            }
            // 给 li标签 绑定移移出事件
            $('.nums li').mouseover(function(){
                clear()
                k = $(this).index();
                show_(k);
            }).mouseout(function(){
                Run();
            })
            // 通过控制k  控制图片和li标签的显示
            $('.prev').click(function(){
                clear()
                k--; if(k<0){ k = m} 
                show_(k);
                console.log(k)
            }).mouseover(function(){
                clear();
            }).mouseout(function(){
                Run();
            })

            $('.next').click(function(){
                clear()
                k++; if(k>m){ k = 0} 
                show_(k);
                console.log(k)
            }).mouseover(function(){
                clear();
            }).mouseout(function(){
                Run();
            })
            
            $('.box').mouseover(function(){
                clear();
                $('.but').css('display','block');
            }).mouseout(function(){
                Run();
                $('.but').css('display','none');
            })
        })
    </script>       



    <!--今日推荐 -->

    <div class="am-g am-g-fixed recommendation">
        <div class="clock am-u-sm-3">
            <img src="/home/images/2016.png "></img>
            <p>今日<br>推荐</p>
        </div>
        <div class="am-u-sm-4 am-u-lg-3 ">
            <div class="info ">
                <h3>真的有鱼</h3>
                <h4>开年福利篇</h4>
            </div>
            <div class="recommendationMain one">
                <a href="introduction.html"><img src="/home/images/tj.png "></img></a>
            </div>
        </div>                      
        <div class="am-u-sm-4 am-u-lg-3 ">
            <div class="info ">
                <h3>囤货过冬</h3>
                <h4>让爱早回家</h4>
            </div>
            <div class="recommendationMain two">
                <img src="/home/images/tj1.png "></img>
            </div>
        </div>
        <div class="am-u-sm-4 am-u-lg-3 ">
            <div class="info ">
                <h3>浪漫情人节</h3>
                <h4>甜甜蜜蜜</h4>
            </div>
            <div class="recommendationMain three">
                <img src="/home/images/tj2.png "></img>
            </div>
        </div>

    </div>
    <!--热门活动 -->

    <div class="am-container activity ">
        <div class="shopTitle ">
            <h4>活动</h4>
            <h3>每期活动 优惠享不停 </h3>
            <span class="more ">
              <a href="# ">全部活动<i class="am-icon-angle-right" style="padding-left:10px ;" ></i></a>
        </span>
        </div>
      <div class="am-g am-g-fixed ">
        <div class="am-u-sm-3 ">
            <div class="icon-sale one "></div>  
                <h4>秒杀</h4>                         
            <div class="activityMain ">
                <img src="/home/images/activity1.jpg "></img>
            </div>
            <div class="info ">
                <h3>春节送礼优选</h3>
            </div>                                                      
        </div>
        
        <div class="am-u-sm-3 ">
          <div class="icon-sale two "></div>    
            <h4>特惠</h4>
            <div class="activityMain ">
                <img src="/home/images/activity2.jpg "></img>
            </div>
            <div class="info ">
                <h3>春节送礼优选</h3>                             
            </div>                          
        </div>                      
        
        <div class="am-u-sm-3 ">
            <div class="icon-sale three "></div>
            <h4>团购</h4>
            <div class="activityMain ">
                <img src="/home/images/activity3.jpg "></img>
            </div>
            <div class="info ">
                <h3>春节送礼优选</h3>
            </div>                          
        </div>                      

        <div class="am-u-sm-3 last ">
            <div class="icon-sale "></div>
            <h4>超值</h4>
            <div class="activityMain ">
                <img src="/home/images/activity.jpg "></img>
            </div>
            <div class="info ">
                <h3>春节送礼优选</h3>
            </div>                                                  
        </div>

      </div>
    </div>
    <!-- <div id="f9"> -->
    <!--甜点-->
    <div id="f10"></div>
    <!--坚果-->
    <div class="am-container ">
        <div class="shopTitle ">
            <h4>坚果</h4>
            <h3>酥酥脆脆，回味无穷</h3>
            <div class="today-brands ">
                <a href="# ">腰果</a>
                <a href="# ">松子</a>
                <a href="# ">夏威夷果 </a>
                <a href="# ">碧根果</a>
                <a href="# ">开心果</a>
                <a href="# ">核桃仁</a>
            </div>
            <span class="more ">
                <a href="# ">更多美味<i class="am-icon-angle-right" style="padding-left:10px ;" ></i></a>
            </span>
        </div>
    </div>
    <div class="am-g am-g-fixed floodThree ">
        <div class="am-u-sm-4 text-four list">
            <div class="word">
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a> 
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>
                <a class="outer" href="#"><span class="inner"><b class="text">核桃</b></span></a>                                 
            </div>
            <a href="# ">
                <img src="/home/images/act1.png " />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>                                  
                </div>
            </a>
            <div class="triangle-topright"></div>   
        </div>
        <div class="am-u-sm-4 text-four">
            <a href="# ">
                <img src="/home/images/6.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>                              
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>
        <div class="am-u-sm-4 text-four sug">
            <a href="# ">
                <img src="/home/images/7.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>
        
        <div class="am-u-sm-6 am-u-md-3 text-five big ">
            <a href="# ">
                <img src="/home/images/10.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>      
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>                      
        <div class="am-u-sm-6 am-u-md-3 text-five ">
            <a href="# ">
                <img src="/home/images/8.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>  
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>                      
        <div class="am-u-sm-6 am-u-md-3 text-five sug">
            <a href="# ">
                <img src="/home/images/9.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>
        <div class="am-u-sm-6 am-u-md-3 text-five big">
            <a href="# ">
                <img src="/home/images/10.jpg" />
                <div class="outer-con ">
                    <div class="title ">
                        雪之恋和风大福
                    </div>          
                    <div class="sub-title ">
                        ¥13.8
                    </div>
                    <i class="am-icon-shopping-basket am-icon-md  seprate"></i>
                </div>
            </a>
        </div>
        
    </div>


    <!--菜单 -->
    <div class=tip>
        <div id="sidebar">
            <div id="wrap">
                <div id="prof" class="item ">
                    <a href="# ">
                        <span class="setting "></span>
                    </a>
                    <div class="ibar_login_box status_login ">
                        <div class="avatar_box ">
                            <p class="avatar_imgbox "><img src="/home/images/no-img_mid_.jpg " /></p>
                            <ul class="user_info ">
                                <li>用户名sl1903</li>
                                <li>级&nbsp;别普通会员</li>
                            </ul>
                        </div>
                        <div class="login_btnbox ">
                            <a href="# " class="login_order ">我的订单</a>
                            <a href="# " class="login_favorite ">我的收藏</a>
                        </div>
                        <i class="icon_arrow_white "></i>
                    </div>

                </div>
                <div id="shopCart " class="item ">
                    <a href="# ">
                        <span class="message "></span>
                    </a>
                    <p>
                        购物车
                    </p>
                    <p class="cart_num ">0</p>
                </div>
                <div id="asset " class="item ">
                    <a href="# ">
                        <span class="view "></span>
                    </a>
                    <div class="mp_tooltip ">
                        我的资产
                        <i class="icon_arrow_right_black "></i>
                    </div>
                </div>

                <div id="foot " class="item ">
                    <a href="# ">
                        <span class="zuji "></span>
                    </a>
                    <div class="mp_tooltip ">
                        我的足迹
                        <i class="icon_arrow_right_black "></i>
                    </div>
                </div>

                <div id="brand " class="item ">
                    <a href="#">
                        <span class="wdsc "><img src="/home/images/wdsc.png " /></span>
                    </a>
                    <div class="mp_tooltip ">
                        我的收藏
                        <i class="icon_arrow_right_black "></i>
                    </div>
                </div>

                <div id="broadcast " class="item ">
                    <a href="# ">
                        <span class="chongzhi "><img src="/home/images/chongzhi.png " /></span>
                    </a>
                    <div class="mp_tooltip ">
                        我要充值
                        <i class="icon_arrow_right_black "></i>
                    </div>
                </div>

                <div class="quick_toggle ">
                    <li class="qtitem ">
                        <a href="# "><span class="kfzx "></span></a>
                        <div class="mp_tooltip ">客服中心<i class="icon_arrow_right_black "></i></div>
                    </li>
                    <!--二维码 -->
                    <li class="qtitem ">
                        <a href="#none "><span class="mpbtn_qrcode "></span></a>
                        <div class="mp_qrcode " style="display:none; "><img src="/home/images/weixin_code_145.png " /><i class="icon_arrow_white "></i></div>
                    </li>
                    <li class="qtitem ">
                        <a href="#top " class="return_top "><span class="top "></span></a>
                    </li>
                </div>

                <!--回到顶部 -->
                <div id="quick_links_pop " class="quick_links_pop hide "></div>

            </div>

        </div>
        <div id="prof-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                我
            </div>
        </div>
        <div id="shopCart-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                购物车
            </div>
        </div>
        <div id="asset-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                资产
            </div>

            <div class="ia-head-list ">
                <a href="# " target="_blank " class="pl ">
                    <div class="num ">0</div>
                    <div class="text ">优惠券</div>
                </a>
                <a href="# " target="_blank " class="pl ">
                    <div class="num ">0</div>
                    <div class="text ">红包</div>
                </a>
                <a href="# " target="_blank " class="pl money ">
                    <div class="num ">￥0</div>
                    <div class="text ">余额</div>
                </a>
            </div>

        </div>
        <div id="foot-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                足迹
            </div>
        </div>
        <div id="brand-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                收藏
            </div>
        </div>
        <div id="broadcast-content " class="nav-content ">
            <div class="nav-con-close ">
                <i class="am-icon-angle-right am-icon-fw "></i>
            </div>
            <div>
                充值
            </div>
        </div>
    </div>
 

@endsection
>>>>>>> b1990139fd74a207cbbfdc7c165186e9f38d0e5d
